<template>
  <view class="content">
    <u-tabbar :value="tabbarIndex" @change="tabChange" :fixed="true" :placeholder="false" :activeColor="searchBk" :zIndex="999">
      <u-tabbar-item v-for="(item, index) in tarbarData.data" :key="index" :text="item.title" :name="index">
        <image :src="item.activeIcon" style="width: 40rpx; height: 40rpx; margin-bottom: 5rpx; margin-top: 10rpx" slot="active-icon"></image>
        <image :src="item.icon" style="width: 40rpx; height: 40rpx; margin-bottom: 5rpx; margin-top: 10rpx" slot="inactive-icon"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, onBeforeMount, nextTick } from "vue";
import { getOneTemplate } from "@/utils/api";

const jsonPage = ref();
const tarbarData = ref({});
const tabbarIndex = ref(0);

const props = defineProps({
  // 列表内容
  jsonPage: {
    type: Object,
    default: () => {},
  },
  tabIndex: {
    type: Number,
    default: () => 0,
  },
});

watch(
  () => props.jsonPage,
  () => {
    jsonPage.value = props.jsonPage;
    nextTick(() => {
      searchBk.value = uni.getStorageSync("backgroundColor");
    });
    initTarbar();
  }
);

watch(
  () => props.tabIndex,
  (val) => {
    tabbarIndex.value = val;
    emit("tabChange", tabbarIndex.value);
  }
);

function initTarbar() {
  jsonPage.value.forEach((item) => {
    if (item.type == "tabbarCom") {
      tarbarData.value = item;
    }
  });
}
const emit = defineEmits(["tabChange"]);
function tabChange(tabIndex: Number) {
  tabbarIndex.value = tabIndex;
  emit("tabChange", tabIndex);
}

const searchBk = ref("");
onBeforeMount(() => {});
</script>

<style lang="scss" scoped></style>
